<!DOCTYPE html>
<html class="x-admin-sm">

<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
  <link rel="stylesheet" href="./css/font.css">
  <link rel="stylesheet" href="./css/xadmin.css">
  <link rel="stylesheet" href="./lib/layui/css/layui.css">
  <!-- <link rel="stylesheet" href="./fontawesome/css/fontawesome.min.css"> -->

  <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>
  <div class="x-nav">
    <span class="layui-breadcrumb">
      <a href="">首页</a>
      <a href="">演示</a>
      <a>
        <cite>导航元素</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
      onclick="location.reload()" title="刷新">
      <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
  </div>
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">

      <!-- 搜索分类部分 -->
      <form class="search_cate" style="margin-top: 10px;">
        <span style="font-size:15px;font-weight:700;">分类名称</span>
        <input type="text" placeholder="请输入分类名称" style="height: 28px;margin-left: 10px;margin-right: 10px;"
          class="content-cate" name="cate_name">
        <button type="search" class="layui-btn layui-btn-normal search"><i
            class="layui-icon layui-icon-search"></i>搜索</button>
        <button type="reset" class="layui-btn layui-btn-primary reset"><i
            class="layui-icon layui-icon-refresh"></i>重置</button>
      </form>

      <!-- 新增部分 -->
      <form class="add_cate">
        <button type="button" class="layui-btn layui-btn-normal add-btn" lay-on="alert"><i
            class="layui-icon layui-icon-add-1"></i>新增</button>
        <button type="button" class="layui-btn layui-btn-warm"><i
            class="layui-icon layui-icon-download-circle"></i>导出</button>
      </form>

      <!-- 表格部分 -->
      <form id="cate">
        <table class="layui-table">
          <colgroup>
            <col width="150">
            <col width="200">
            <col>
          </colgroup>
          <thead>
            <tr>
              <th style="font-size: 16px;text-align:center;">#</th>
              <th style="font-size: 16px;text-align:center;">分类ID</th>
              <th style="font-size: 16px;text-align:center;">分类名称</th>
              <th style="font-size: 16px;text-align:center;">图标class</th>
              <th style="font-size: 16px;text-align:center;">权重</th>
              <th style="font-size: 16px;text-align:center;">操作</th>
            </tr>
          </thead>
          <tbody id="category">
            <!-- <tr>
              <td>1</td>
              <td>3</td>
              <td>aaa</td>
              <td>bbb</td>
              <td>20</td>
              <td>
                <i class="layui-icon layui-icon-edit" style="font-size: 20px;color: skyblue;"></i>
                <i class="layui-icon layui-icon-delete" style="font-size: 20px;color: red;"></i>
              </td>
            </tr> -->
          </tbody>
        </table>
      </form>

      <!-- 分页 -->
      <div id="page-box"></div>

    </div>
  </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
<script src="./js/ajaxBase.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./lib/layui/layui.js"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>

<script>

  let form = layui.form

  const query = {
    pagenum: 1,
    pagesize: 10,
    cate_name: '',
  }


  // -------------------------------- 获取列表数据(渲染分类列表) --------------------------------
  function cateRender() {
    axios.get('/ydd_cate/list', {
      params: {
        catename: query.cate_name,
        page: query.pagenum,
        limit: query.pagesize
      }
    })
      .then(res => {
        // console.log(res.data.data.data)
        const list = res.data.data.data.map((item, index) => `
      <tr>
              <td style="font-size: 13px; text-align:center;">${index + 1}</td>
              <td style="font-size: 13px; text-align:center;">${item.id}</td>
              <td style="font-size: 13px; text-align:center;">${item.catename}</td>
              <td style="font-size: 13px; text-align:center;">${item.icon}</td>
              <td style="font-size: 13px; text-align:center;">${item.sort_num}</td>
              <td style="font-size: 13px; text-align:center;">
                <i class="layui-icon layui-icon-edit btn_edit" style="font-size: 20px;color: skyblue;" data-id=${item.id}></i>
                <i class="layui-icon layui-icon-delete btn_delete" style="font-size: 20px;color: red;" data-id=${item.id}></i>
              </td>
            </tr>
      `).join('')
        $('#category').html(list)
        renderPage(res.data.data.count)
      })

  }
  cateRender()

  // -------------------------------- 搜索功能 --------------------------------
  $('.search').on('click', function (e) {
    e.preventDefault()

    query.cate_name = $('.content-cate').val()
    // console.log(query.cate_name);

    cateRender()
  })


  // -------------------------------- 重置功能 --------------------------------
  $('.reset').click(function () {
    query.pagenum = 1
    query.pagesize = 10
    query.cate_name = ''
    cateRender()
  })

  // -------------------------------- 新增功能 --------------------------------
  let indexAddForm
  let num
  let sort
  $('.add_cate').on('click', '.add-btn', function () {
    // 添加分类
    indexAddForm = layer.open({
      content: `
    <form id="addForm" class="layui-form">
        <!-- 第一行 分类名称 -->
        <div class="layui-form-item" style="margin-top:20px;margin-right:50px">
          <label class="layui-form-label"><span style="color:red">*</span> 分类名称</label>
          <div class="layui-input-block">
            <input type="text" name="catename" required lay-verify="required" placeholder="请输入分类名" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第二行 图标class  -->
        <div class="layui-form-item" style="margin-right:300px">
          <label class="layui-form-label"><span style="color:red">*</span> 图标class</label> 
          <div class="layui-input-block">
            <input type="text" name="icon" required lay-verify="required" placeholder="请输入class名" autocomplete="off"
              class="layui-input" style="margin-bottom:10px">
              <a href="https://fontawesome.com.cn/v4/icons-ui/" target="_blank">具体参见fontawesome图标库</a>
          </div>
        </div>
        <!-- 第三行 排序大小  -->
        <div class="layui-form-item" style="margin-right:300px;display:flex;position:relative">
          <label class="layui-form-label">排序大小</label> 
          <div class="layui-input-block" style="display:flex;position:absolute;">
           
              <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="dec" style="float:left;">
                <i class="layui-icon layui-icon-subtraction"></i>
              </button>
              <input type="text" name="sort_num" required lay-verify="required" autocomplete="off"
                          class="layui-input" id="num" style="float:left;text-align:center;">          
              <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="inc" style="float:left;">
                <i class="layui-icon layui-icon-addition"></i>
              </button>
  
          </div>
        </div>

        <!-- 第四行 按钮 -->
        <div class="layui-form-item" style="margin-top:10px">
          <div class="layui-input-block">
            <button type="button" class="layui-btn layui-btn-primary cancel">取消</button>
            <button type="submit" class="layui-btn layui-btn-normal">确定</button>
          </div>
        </div>
      </form>
    `,
      type: 1,
      title: ['添加分类', 'font-size: 18px;'],
      area: ['600px', '300px']
    });
    //拿到的indexAddForm是一个重要的凭据，它是诸如layer.close(indexAddForm)等方法的必传参数。

    // 让输入框内容默认显示为10
    $('#num').val(10)

    // 若输入框内容不是数字，则默认为10
    if (isNaN(sort)) {
      $('input[name="sort_num"]').val(10)
    }
    // 获取输入框的内容
    num = $('input[name="sort_num"]').val()
    // console.log(num);

    sort = parseInt(num)  //如果变量num是字符类型的数则转换为int类型，如果不是则sort为NaN
    // console.log(sort);
    // console.log(typeof (sort));

    form.render()

  })

  $('body').on('click', '#dec', function () {

    // 判断输入框内容是否为数字
    if (!isNaN(sort)) {
      // alert(num + '是数字')
      num--
      if (num < 0) { num = 0 }
      $('input[name="sort_num"]').val(parseInt(num))
    } else {
      // alert(num + '不是数字')
      $('input[name="sort_num"]').val(10)
    }

  })

  $('body').on('click', '#inc', function () {
    if (!isNaN(sort)) {
      num++
      if (num > 100) { num = 100 }
      $('input[name="sort_num"]').val(parseInt(num))
    } else {
      $('input[name="sort_num"]').val(10)
    }
  })

  // 点击取消关闭内容框
  $('body').on('click', '.cancel', function () {
    layer.close(indexAddForm)
  })

  // 确认添加
  $('body').on('submit', '#addForm', function (e) {
    e.preventDefault()
    // 收集表单数据
    const data = $(this).serialize()
    // console.log(data);

    axios.post('/ydd_cate/add', data)
      .then((res) => {
        // console.log(res)
        layer.close(indexAddForm)
        layer.msg('添加成功')
        cateRender()
      })
  })



  //-------------------------------- 编辑功能 --------------------------------
  let indexEditForm
  $('#category').on('click', '.btn_edit', function () {
    const id = $(this).attr('data-id')
    // console.log(id)
    axios.get('/ydd_cate/rowInfo', { params: { id } })
      .then(data => {
        // console.log(data.data.data)

        // 给表单赋值
        form.val('editForm', data.data.data)
      })

    indexEditForm = layer.open({
      content: `
    <form id="editForm" class="layui-form" lay-filter="editForm">
        <!-- 第一行 分类名称 -->
        <div class="layui-form-item" style="margin-top:20px;margin-right:50px">
          <label class="layui-form-label"><span style="color:red">*</span> 分类名称</label>
          <div class="layui-input-block">
            <input type="text" name="catename" required lay-verify="required" placeholder="请输入分类名" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第二行 图标class  -->
        <div class="layui-form-item" style="margin-right:300px">
          <label class="layui-form-label"><span style="color:red">*</span> 图标class</label> 
          <div class="layui-input-block">
            <input type="text" name="icon" required lay-verify="required" placeholder="请输入class名" autocomplete="off"
              class="layui-input" style="margin-bottom:10px">
              <a href="https://fontawesome.com.cn/v4/icons-ui/" target="_blank">具体参见fontawesome图标库</a>
          </div>
        </div>
        <!-- 第三行 排序大小  -->
        <div class="layui-form-item" style="margin-right:300px;">
          <label class="layui-form-label">排序大小</label> 
          <div class="layui-input-block">
            
              <input type="text" name="sort_num" required lay-verify="required" autocomplete="off"
                          class="layui-input" id="num" style="text-align:center;">          
        
          </div>
        </div>
        <!-- 第四行 排序大小  -->
        <div class="layui-form-item" style="margin-right:300px;display:none">
          <label class="layui-form-label">排序大小</label> 
          <div class="layui-input-block">
            <input type="text" name="default_data" required lay-verify="required" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第五行 排序大小  -->
        <div class="layui-form-item" style="margin-right:300px;display:none">
          <label class="layui-form-label">排序大小</label> 
          <div class="layui-input-block">
            <input type="text" name="id" required lay-verify="required" autocomplete="off"
              class="layui-input">
          </div>
        </div>

        <!-- 第六行 按钮 -->
        <div class="layui-form-item" style="margin-top:10px">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
          </div>
        </div>
      </form>
    `,
      type: 1,
      title: ['修改分类', 'font-size: 18px;'],
      area: ['600px', '300px']
    });

    //拿到的indexEditForm是一个重要的凭据，它是诸如layer.close(indexEditForm)等方法的必传参数。
  })

  // 确认修改
  $('body').on('submit', '#editForm', function (e) {
    e.preventDefault()
    const data = $(this).serialize()
    // console.log(data);
    axios.post('/ydd_cate/update', data)
      .then(res => {
        // console.log(res)
        layer.close(indexEditForm)
        layer.msg('修改成功')
        cateRender()
      })

  })

  // -------------------------------- 删除功能 --------------------------------
  $('#category').on('click', '.btn_delete', function () {
    const id = $(this).attr('data-id')
    // console.log(id);

    layer.confirm('确定要删除吗？', function () {
      axios.get('/ydd_cate/del', {
        params: {
          id
        }
      })
        .then(res => {
          // console.log(res)
          if (res.data.errno !== 0) {
            return layer.msg(res.data.errmsg)
          }
          layer.msg('删除成功')
          cateRender()
        })
    })

  })

  // -------------------------------- 分页功能 --------------------------------
  // const query = {
  //   pagenum: 1,
  //   pagesize: 10,
  //   cate_name: '',
  // }
  function renderPage(count) {

    var laypage = layui.laypage;
    // 完整显示
    laypage.render({
      elem: 'page-box', // 元素 id
      count: count, // 数据总数
      limit: query.pagesize,//每页显示的条数
      limits: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],//每页条数的选择项
      curr: query.pagenum,//初始化当前页码
      layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'], // 功能布局
      jump: function (obj, first) {
        // 参数 obj : 当前分页相关的所有选项值
        // 参数 first : 是否首次渲染，一般用于初始加载的判断
        // console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
        // console.log(obj.limit); // 得到每页显示的条数


        // 完成切换分页效果 ==> 核心就是发ajax请求
        query.pagenum = obj.curr
        query.pagesize = obj.limit

        if (!first) {
          cateRender()
        }
      }

    })
  }


</script>

</html>